<template>
  <div class="container">
      <el-card style="margin: 10px">
        <div slot="header" class="clearfix">
          <span>访客记录</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="handleNewVisit" v-if="!myrole">新增记录</el-button>
        </div>
        <el-table
          :data="visitList"
          stripe
          class="table">
          <el-table-column
            prop="cno"
            label="客户编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="date"
            label="到访日期">
          </el-table-column>
          <el-table-column
            prop="sno"
            label="主理人">
          </el-table-column>
          <el-table-column
            prop="newpre"
            label="新偏好">
          </el-table-column>
        </el-table>
      </el-card>

    <el-dialog
      title="新增到访记录"
      :visible.sync="visitDialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form :model="recordToAdd" label-position="left" label-width="30%">
          <el-form-item label="选择客户">
            <el-select v-model="recordToAdd.cno" placeholder="请选择顾客">
              <el-option v-for="(item,index) in getClientList"
                         :key="index"
                         :label="item.name"
                         :value="item.cno">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="顾客编号">
            <el-input v-model="recordToAdd.cno" style="width: 50%" disabled></el-input>
          </el-form-item>
          <el-form-item label="选择新偏好">
            <el-select
              v-model="recordToAdd.newpre"
              filterable
              default-first-option
              placeholder="选择偏好">
              <el-option
                v-for="(item,index) in carModels"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="addVisitRecord">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import role from "assets/role"
  export default {
    name: "VisitTable",
    props:{
      visitList:[],
    },
    data(){
      return{
        /*角色*/
        myrole:role.state.username==="root",
        visitDialogVisible:false,
        /*即将增加的到访记录*/
        recordToAdd:{
          cno:'',
          newpre:'',
        },
        /*所有顾客列表*/
        getClientList:[],
        /*所有车的型号*/
        carModels:[],
      }
    },
    methods:{
      async handleNewVisit(){
        /*获取车型列表*/
        this.$axios.get("new_visit_model").then((res)=>{
          console.log(res);
          this.carModels=res.data;
        })
        /*获取顾客列表*/
        this.$axios.get('/get_customer_table').then((res)=>{
          console.log(res);
          this.getClientList=res.data;
          console.log(this.getClientList);
        })
        this.visitDialogVisible=true;
      },
      async addVisitRecord(){
        let mydata=this.recordToAdd;
        this.$axios.post("/new_visit",mydata).then((res)=>{
          console.log(res);
          if(res.data==='1'){
              this.$message({
                type: 'success',
                message: '新增记录成功!'
              });
          }else{
            this.$message({
              type: 'error',
              message: '失败!'
            });
          }
          this.$emit("newRecord");
        }),
        this.handleClose();
      },
      handleClose(){
        this.recordToAdd={};
        this.visitDialogVisible=false;
      },
    }
  }
</script>

<style scoped>
  .table{
    height: 725px;
    width: 100%;
    overflow-y: scroll;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
